<template>
  <div id="center">
    <div class="up">
      <div class="bg-color-black item" v-for="item in titleItem" :key="item.title">
        <p class="ml-3 colorBlue fw-b">{{item.title}}</p>
        <div>
          <dv-digital-flop :config="item.number" style="width:100px;height:50px;" />
        </div>
      </div>
    </div>
    <div class="down">
      <div class="ranking bg-color-black">
        <span style="color:#5cd9e8">
          <icon name="align-left"></icon>
        </span>
        <span class="fs-xl text mx-2 mb-1">年度负责人组件达标榜</span>
        <dv-scroll-ranking-board :config="ranking" style="height:220px" />
      </div>
      <div class="percent">
        <div class="item bg-color-black">
          <span>今日任务通过率</span>
          <centerChart1 />
        </div>
        <div class="item bg-color-black">
          <span>今日任务达标率</span>
          <centerChart2 />
        </div>
        <div class="water">
          <dv-water-level-pond :config="water" style="height: 120px" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import centerChart1 from "@/components/echart/center/centerChart1";
import centerChart2 from "@/components/echart/center/centerChart2";

export default {
  data() {
    return {
      titleItem: [
        {
          title: "今年累计任务建次数",
          number: {
            number: [120],
            toFixed: 1,
            content: "{nt}"
          }
        },
        {
          title: "本月累计任务次数",
          number: {
            number: [18],
            toFixed: 1,
            content: "{nt}"
          }
        },
        {
          title: "今日累计任务次数",
          number: {
            number: [2],
            toFixed: 1,
            content: "{nt}"
          }
        },
        {
          title: "今年失败任务次数",
          number: {
            number: [14],
            toFixed: 1,
            content: "{nt}"
          }
        },
        {
          title: "今年成功任务次数",
          number: {
            number: [106],
            toFixed: 1,
            content: "{nt}"
          }
        },
        {
          title: "今年达标任务个数",
          number: {
            number: [100],
            toFixed: 1,
            content: "{nt}"
          }
        }
      ],
      ranking: {
        data: [
          {
            name: "周口",
            value: 55
          },
          {
            name: "南阳",
            value: 120
          },
          {
            name: "西峡",
            value: 78
          },
          {
            name: "驻马店",
            value: 66
          },
          {
            name: "新乡",
            value: 80
          },
          {
            name: "新乡",
            value: 80
          },
          {
            name: "新乡",
            value: 80
          },
          {
            name: "新乡",
            value: 80
          }
        ],
        waitTime: 4000,
        carousel: "page",
        unit: "份"
      },
      water: {
        data: [24, 45],
        shape: "roundRect",
        formatter: "{value}%",
        waveNum: 3
      }
    };
  },
  components: {
    centerChart1,
    centerChart2
  }
};
</script>

<style  scoped>
#center {
  display: flex;
  flex-direction: column;
}
#center .up {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
#center .up .item {
  border-radius: 5px;
  padding-top: 1rem;
  margin-top: 0.5rem;
  width: 32%;
  height: 70px;
}
#center .down {
  padding: 4px;
  padding-bottom: 0px;
  width: 100%;
  display: flex;
  height: 255px;
  justify-content: space-between;
}
#center .down .bg-color-black {
  border-radius: 5px;
}
#center .down .ranking {
  padding: 10px;
  width: 59%;
}
#center .down .percent {
  width: 40%;
  display: flex;
  flex-wrap: wrap;
}
#center .down .percent .item {
  width: 50%;
  height: 120px;
}
#center .down .percent .item span {
  margin-top: 7px;
  display: flex;
  justify-content: center;
}
#center .down .percent .water {
  width: 100%;
}
</style>